<template>
	<page-meta :page-style="themeColor"></page-meta>
	<!-- <uni-navbar></uni-navbar> -->
	<view>
		<!-- <view class="category-search">
			<u-search placeholder="请输入关键词" v-model="keyword" :show-action="false" :height="80"></u-search>
		</view> -->
		<view class="category-banner">
			<u-swiper :list="list" height="940" img-mode="widthFix" @click="handleGoSwiper"></u-swiper>
		</view>
		<view id="middle"></view>
		<block v-if="diyData">
			<block v-for="(item, index) in diyData.value" :key="index">
				<view v-if="item.componentName == 'GoodsCategory'" id="cat">
					<diy-category @tologin="toLogin" @goCategory="goCategory" ref="category" :value="item"
						:transShow="transShow" :modeClass="modeClass"></diy-category>
				</view>
			</block>
		</block>

		<!-- 说接收接收 -->
		<scroll-view v-else scroll-y="true" show-scrollbar="false"
			:style="{ height: 'calc(100vh - headerHeight - 55px)' }">
			<view class="bg-index" :style="backgroundUrl">
				<diy-group ref="diyGroup" :diyData="diyData" v-if="diyData.value"></diy-group>
				<view class="padding-bottom"><ns-copy-right></ns-copy-right></view>
			</view>
		</scroll-view>

		<template>
			<view @touchmove.prevent.stop>
				<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
					<view class="image-wrap">
						<image :src="$util.img(diyData.global.popWindow.imageUrl)" :style="popWindowStyle"
							@click="$util.diyRedirectTo(diyData.global.popWindow.link)" mode="aspectFit"></image>
					</view>
					<text class="iconfont iconroundclose" @click="closePopupWindow"></text>
				</uni-popup>
			</view>
		</template>

		<!-- 说接收接收 -->

		<ns-login ref="login"></ns-login>
		<loading-cover ref="loadingCover"></loading-cover>

		<!-- 底部tabBar -->
		<view id="tab-bar">
			<diy-bottom-nav></diy-bottom-nav>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				diyData: null,
				homeData: null,
				keyword: "",
				list: [],
				transShow: false,
				modeClass: ['fade'],
			};
		},
		onLoad() {
			uni.hideTabBar()
			this.getDiyInfo()
			this.getHomeInfo()
			this.modeClass = ['slide-bottom']
			this.transShow = true
		},
		onShow() {
			if (this.$refs.category) this.$refs.category[0].pageShow();
		},
		methods: {
			getDiyInfo() {
				this.$api.sendRequest({
					url: '/api/diyview/info',
					data: {
						name: 'DIY_VIEW_GOODS_CATEGORY'
					},
					success: res => {
						if (res.code == 0 && res.data) {
							this.diyData = res.data;
							if (this.diyData.value) {
								this.diyData = JSON.parse(this.diyData.value);
								if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
							}
							uni.stopPullDownRefresh();
						}
					}
				});
			},
			getHomeInfo() {
				this.$api.sendRequest({
					url: '/api/diyview/info',
					data: {
						name: 'DIY_VIEW_INDEX'
					},
					success: res => {
						if (res.code == 0 && res.data) {
							this.homeData = res.data;
							if (this.homeData.value) {
								this.homeData = JSON.parse(this.homeData.value);
								if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
							}
							this.homeData.value.map((item)=>{
								if(item.componentTitle == "图片广告"){
									item.list.map(item2=>{
										const params = {
											image: this.$util.img(item2.imageUrl),
											url: item2.link.wap_url
										}
										this.list.push(params)
									})
								}
							})
							uni.stopPullDownRefresh();
						}
					}
				})
			},
			toLogin() {
				this.$refs.login.open('/pages/index/index')
			},
			goCategory() {
				setTimeout(() => {
					uni.pageScrollTo({
						scrollTop: 470,
						duration: 1000
					});
				}, 500)
			},
			handleGoSwiper(val){
				console.log(this.list[val])
			}
		},
		onReachBottom() {
			this.$refs.category[0].getMoreGoodsList()
		}
	};
</script>

<style lang="scss" scoped>
	.category-search {
		margin: 30rpx
	}

	.category-banner {
		margin: 0 30rpx;
	}
</style>

<style lang="scss">
	/deep/ .uni-popup__wrapper.uni-center {
		background: rgba(0, 0, 0, 0.6);
	}

	/deep/ .uni-popup__wrapper-box {
		border-radius: 0 !important;
	}

	/deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
		overflow-y: visible;
	}

	/deep/ .loading-layer {
		background: #fff !important;
	}

	// 分类四一级展开
	/deep/ .category-template-4 .template-four .uni-popup__wrapper-box {
		border-radius: 0px 0px 14px 14px !important;
		overflow: hidden;
	}

	/deep/ .category-template-4 .template-four .uni-popup {
		top: 100rpx;
	}

	/* #ifndef H5 */
	/deep/ .category-template-4 .template-four.wx .uni-popup {
		top: 165rpx;
	}

	/* #endif */
	/deep/ .category-template-4 .content-wrap .categoty-goods-wrap .goods-list {
		margin-top: 30rpx;
	}

	/deep/ .category-template-4 .content-wrap .goods-list .goods-item .footer-wrap .right-wrap .num-action {
		width: 44rpx;
		height: 44rpx;
	}
</style>